Lorenz Henk

Full Stack Developer

CSS class grouping

In HTML, any symbol or undefined class name is ignored. Thus, you can use custom separators to group your classes.

<div class="sm-8 lg-3 bg-black fg-green custom-class1" />
<div class="sm-8 lg-3 / bg-black fg-green / custom-class1" />
<div class="[ sm-8 lg-3 ] [ bg-black fg-green ] [ custom-class1 ]" />

Typescript function parameter type

A previous post mentioned the Typescript ReturnType utility type. It is really handy to retrieve the return type of a function.

But there is also a type to retrieve the parameter list of a function. Meet Parameters<T>.

const add = (first: number, second: number) => first + second;

const cache = <T extends (...args: any) => any>(func: T) => {
  const cacheObject = {};
  return (...args: Parameters<T>) => {
    const hashedArgs = JSON.stringify(args);
    if (cacheObject.hasOwnProperty(hashedArgs)) {
      return cacheObject[hashedArgs];
    } else {
      return (cacheObject[hashedArgs] = func(...args));
    }
  };
};

See the full example here.

The code can be found at lib/lib.es5.d.ts:

/**
 * Obtain the parameters of a function type in a tuple
 */
type Parameters<T extends (...args: any) => any> = T extends (...args: infer P) => any ? P : never;

Enhance Redux props with ReturnType

The following example is built in the offical Redux documentation:

import { AppState } from './store'

import { SystemState } from './store/system/types'

import { ChatState } from './store/chat/types'

interface AppProps {
  chat: ChatState
  system: SystemState
}

const mapStateToProps = (state: AppState) => ({
  system: state.system,
  chat: state.chat
})

Here, SystemState and ChatState are imported and used manually.

But as AppState is correctly typed, we can use our beloved ReturnType instead:

import { AppState } from './store'

type AppProps = ReturnType<typeof mapStateToProps>

const mapStateToProps = (state: AppState) => ({
  system: state.system,
  chat: state.chat
})

Check out this CodeSandbox for a runnning example.


Composite types and NULL in PostgreSQL

Basics

-- a row including only nulls is null
$ SELECT ROW(NULL, NULL) IS NULL;
-> true

-- a row including no nulls is not null
$ SELECT ROW(10, 10) IS NOT NULL;
-> true

Unusual

-- this row is not NULL
$ SELECT ROW(10, NULL) IS NULL;
-> false

-- but it's also not NOT NULL
$ SELECT ROW(10, NULL) IS NOT NULL;
-> false

-- there is a difference between `NOT ROW(...) IS NULL` and `ROW(...) IS NOT NULL`
$ SELECT NOT ROW(10, NULL) IS NULL;
-> true

Wait, what?

-- as mentioned above, a row including only nulls is null
$ SELECT ROW(NULL) IS NULL;
-> true

-- this does not apply recursively, though
$ SELECT ROW(ROW(NULL)) IS NULL;
-> false
What's going on there?

Values inside of a composite type are checked for NULL value equality, which is not the same as recursively checking with IS NULL!

This behavior is explained in this twitter post.

We can (ab)use this to check if a value is literally NULL or just a value that IS NULL:

SELECT  value              AS value,
        value      IS NULL AS is_null,
        ROW(value) IS NULL AS is_null_value
FROM    (VALUES (NULL), (ROW(NULL))) AS x(value);
 value  | is_null | is_null_value
--------+---------+---------------
 <null> | t       | t
 ()     | t       | f

Check out this blog post for more information on NULL behavior.


Git add partial files

I often write lots of code at once and forget to commit. Then I have to create one huge commit with all changes, because I thought I can't partially stage and commit a file.

Turns out, you can do exactly that with git add -p!

This command lets you interactively select which hunks (blocks of changes) you want to stage.


Disable ssh host key check

When automating a task, there's nothing more annoying than an "are you sure?"-question popping up.

If you want to automate an ssh connection, chances are this is the first time you're connecting to your target. Thus, you'll be presented with the following message:

$ ssh example.com
The authenticity of host 'example.com (...)' can't be established.
RSA key fingerprint is SHA256:P2VbGDRAAaPQTaBovKynIccHxse4aXNH0ZgGLyVTzQL.
Are you sure you want to continue connecting (yes/no/[fingerprint])?

This check can be turned off with the StrictHostKeyChecking option:

$ ssh -o StrictHostKeyChecking=no example.com

Caution: This is a security check to mitigate different attacks. Only turn this feature off if you understand the risks.


Git stage parts of a file in VS Code

With VS Code, you can interactively select which parts of a file should be staged:

  1. Make changes to a file that is managed with git
  2. Go to the Working Tree view of that file
  3. Select the lines you want to stage and click the right mouse button Diff view
  4. Click Stage Selected Ranges Menu

Additionally, you can also unstage or revert the selected changes.